<template>
  <div class="box">

    <div>
      <!-- ----------------------------------------------------------------------------------------- -->
      <!-- 文字链接 -->
      <el-button icon="el-icon-plus" type="primary" plain size="mini" @click="isShow=true">新增</el-button>
      <el-tabs v-model="queryData.type" @tab-click="handleClick">

        <el-tab-pane label="文字链接" name="1">

          <!-- 表格区域 -->
          <div class="table-box">
            <el-table
              :data="list"
              style="width: 100%"
              border
            >
              <el-table-column prop="index" label="#" width="50" />
              <el-table-column prop="title" label="标题" />
              <el-table-column prop="des" label="链接描述" />
              <el-table-column prop="" label="链接类型">
                <template #default>
                  <el-tag>文字类型</el-tag>

                </template>
              </el-table-column>
              <el-table-column prop="url" label="链接地址" />
              <el-table-column prop="" label="操作">
                <template #default="{row}">
                  <el-button type="primary" icon="el-icon-edit" circle size="mini" @click="open(row.id)" />
                  <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="del(row.id)" />
                </template>

              </el-table-column>
            </el-table>
          </div>
          <!-- 分页区域 -->
          <!-- 分页区域 -->
          <div class="page">
            <el-pagination
              :current-page="queryData.page"
              :page-sizes="[1,2,5, 10, 20, 30]"
              :page-size="queryData.limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
        <!-- --------------------------------------------------------------------------------------------- -->
        <!-- 图片链接 -->
        <el-tab-pane label="图片链接" name="2">

          <!-- 表格区域 -->
          <div class="table-box">
            <el-table
              :data="list"
              style="width: 100%"
              border
            >
              <el-table-column prop="index" label="#" width="50" />
              <el-table-column prop="des" label="链接描述" />
              <el-table-column prop="" label="链接图片">
                <template #default="{row}">
                  <img style="width:150px" :src="'http://124.223.14.236:8060/' + row.img" alt="">
                </template>
              </el-table-column>
              <el-table-column prop="" label="链接类型">
                <template #default>
                  <el-tag type="success">图片类型</el-tag>

                </template>
              </el-table-column>
              <el-table-column prop="url" label="链接地址" />
              <el-table-column prop="" label="操作">
                <template #default="{row}">
                  <el-button type="primary" icon="el-icon-edit" circle size="mini" @click="open(row.id)" />
                  <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="del(row.id)" />
                </template>

              </el-table-column>

            </el-table>
          </div>
          <!-- 分页区域 -->
          <div class="page">
            <el-pagination
              :current-page="queryData.page"
              :page-sizes="[1,2,5, 10, 20, 30]"
              :page-size="queryData.limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
      <!-- <el-button icon="el-icon-plus" type="primary" plain size="mini" @click="isShow=true">新增</el-button> -->
    </div>
    <!-- 弹出框 -->
    <el-dialog
      title="提示"
      :visible.sync="isShow"
      width="50%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="form">

        <el-form-item label="链接类型">
          <el-select v-model="form.type" placeholder="请选择" style="width:40%">
            <el-option label="文字链接" value="1" />
            <el-option label="图片链接" value="2" />

          </el-select>

        </el-form-item>
        <el-form-item label="链接地址" prop="url">
          <el-input v-model="form.url" style="width:70%" size="small" placeholder="请输入链接地址名称" />
        </el-form-item>

        <el-form-item v-if="form.type==='1'" label="标题" prop="title">
          <el-input v-model="form.title" style="width:70%" size="small" placeholder="请输入标题名称" />
        </el-form-item>

        <el-form-item label="链接描述" prop="des">
          <el-input v-model="form.des" type="textarea" style="width:70%" size="mini" placeholder="请输入链接描述名称" />
        </el-form-item>
        <el-form-item v-if="form.type==='2'" label="链接图片" prop="img">
          <el-upload
            v-model="form.img"
            class="upload-demo"
            action="http://124.223.14.236:8060/admin/common/upload?type=images"
            :file-list="fileList"
            :on-success="handleChange"
            :headers="toekn"

            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
          </el-upload>
        </el-form-item>
        <el-form-item>

          <el-button type="primary" @click="submit">确认</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>

      </el-form>

    </el-dialog>
  </div>
</template>
<script>
import { getList, add, edit, updata, del } from '@/api/adv/link'
import { getToken } from '@/utils/auth'
export default {
  data() {
    return {
      fileList: [],
      id: '',
      toekn: {},
      value: '',
      rules: {
        title: [{ required: true, message: '标题内容不能为空', trigger: 'blur' }],
        des: [{ required: true, message: '描述内容不能为空', trigger: 'blur' }],
        img: [{ required: true, message: '图片类型不能为空', trigger: 'blur' }],
        url: [{ required: true, message: '链接地址不能为空', trigger: 'blur' }]
      },
      form: {
        type: '',
        title: '',
        des: '',
        url: '',
        img: ''

      },
      isShow: false,
      total: 0,
      queryData: {
        type: '1',
        page: 1,
        limit: 10
      },
      list: [],
      textList: [],
      picList: []

    }
  },
  created() {
    this.initData()
    this.handleClick()
    const token = getToken()
    this.toekn = { 'X-token': token }
  },
  methods: {
    del(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await del({ id })
        console.log(res)
        this.initData()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })

      // this.$alert('确定删除吗,是否继续?', {
      //   confirmButtonText: '确定',
      //   callback: async action => {
      //     const res = await del({ id })
      //     console.log(res)
      //     this.$message({
      //       type: 'info',
      //       message: `action: ${action}`
      //     })
      //   }
      // })
    },
    // 编辑---数据回显
    async open(id) {
      this.id = id
      // console.log(id)
      this.isShow = true
      const res = await edit({ id })
      this.fileList = [{ url: 'http://124.223.14.236:8060/' + res.data.img }]
      console.log(res)
      this.form = res.data
    },
    // 上传图片的回调函数
    handleChange(response) {
      this.form.img = response.data.savePath
    },
    // 添加操作
    async submit() {
      if (this.id) {
        await updata(this.form)
        // console.log(res)
        this.$refs.form.resetFields()

        this.handleClose()
        this.initData()
      } else {
        // console.log(this.form.type)
      // 添加文字链接
        this.$refs.form.validate(async isOk => {
          if (!isOk) return
          await add(this.form)
          this.$refs.form.resetFields()

          this.handleClose()
          this.initData()
        })
      }

      // console.log(this.form.img)
      // console.log(res)
    },
    cancel() {
      this.handleClose()
      this.initData()
    },
    handleClose() {
      this.form = {
        type: '',
        title: '',
        des: '',
        url: '',
        img: ''
      }
      this.$refs.form.resetFields()
      this.initData()
      this.isShow = false
    },
    handleCurrentChange(val) {
      this.queryData.page = val

      this.initData()
    },
    handleSizeChange(val) {
      this.queryData.limit = val
      this.queryData.page = 1
      this.initData()
    },
    async initData() {
      const res = await getList(this.queryData)
      this.list = res.data.data
      this.total = res.data.count
    },
    async handleClick(tab, event) {
      const res = await getList(this.queryData)
      // console.log(res)
      // this.textList = res.data.data
      // this.picList = res.data.data
      this.list = res.data.data
      this.total = res.data.count
      // console.log(tab, event)
      // console.log(this.queryData.type)
    }
  }
}
</script>
<style scoped lang="scss">

   .page-box {
    padding: 20px;
    .search-box,.tabbar-box {
      padding-top: 10px;
      border:  1px solid #eee;
      // margin-bottom: 20px;
      height: 50px;
    }
  }

  // .el-button--primary{
  //   right: 50px;
  // }

</style>
